<style lang="scss">
.z-tree__node {
  font-size: 14px;
}

.z-tree {
  color: #242424;
  .el-tree-node__content {
    height: 38px;
  }

  .z-tree__node {
    height: 100%;
    width: 100%;
  }

  .el-tree {
    .z-tree__node-icon {
      margin-left: 10px;
    }
    > .el-tree-node{
      > .el-tree-node__content {
        border-left: 4px transparent solid;
        &:hover {
          border-left-color: #F5F7FA ;
        }
        > .el-tree-node__expand-icon {
          display: block;
        }
      }
      &.is-expanded, &.is-current {
        > .el-tree-node__content {
          //width: 100%;
          background-color: #e7efff;
          border-left: 4px #0781fb solid;
        }
      }
    }

    .el-tree-node__expand-icon {
      transform: rotate(90deg);
      position: absolute;
      right: 0;
      display: none;
    }

    .el-tree-node__expand-icon.expanded {
      transform: rotate(270deg);
    }
  }
}
.z-tree__node {
  display: flex;
  align-items: center;
  > * {
    margin-left: 10px;
  }
}
</style>

<template>
  <div class="z-tree" :class="['z-tree--'+type]">
    <el-tree :data="data" :props="defaultProps"
             @node-expand="handleNodeExpand" @node-click="handleNodeClick">
       <div class="z-tree__node" slot-scope="{ node, data }"
            v-right-click:[node]="rightMenuObj"
       >
         <template v-if="Z_GET(data, 'ui.nodeIcon')">
           <i :class="Z_GET(data, 'ui.nodeIcon')"></i>
         </template>
         <template v-else>
           <template v-if="node.level < 2">
             <img class="z-tree__node-icon"
                  v-if="(node.expanded || node.isCurrent)"
                  :src="icons.checked">
             <img class="z-tree__node-icon"
                  v-else
                  :src="icons.default">
           </template>
         </template>
         <span class="z-tree__node-title">{{ node.label }}</span>
      </div>
    </el-tree>
  </div>
</template>

<script>
export default {
  name: "ZTree",
  props: {
    type: {
      type: String,
      default: ''
    },
    data: {
      type: Array,
      default() {
        return []
      }
    },
    rightMenu: {
      type: Array,
      default() {
        return []
      }
    }
  },
  computed: {
    params() {
      return {id: 1}
    },
    rightMenuObj() {
      // 右键菜单对象，菜单内容和处理事件
      let self = this
      const obj = {
        // this: this,
        text(e) {
          return self.rightMenu
        },
        handler: {
          async click(...args) {
            // console.log(parameter)
            self.$emit('right-click', ...args)
          }
        }
      };
      return obj;
    }
  },
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      icons: {
        default: '',
        checked: ''
      }
    };
  },
  mounted() {
    // console.log(this.$el)
    this.checkIsLeaf()
  },
  methods: {
    handleNodeExpand() {
      this.checkIsLeaf()
    },
    checkIsLeaf() {
      setTimeout(() => {
        let n = this.$el.querySelectorAll('.is-leaf')
        if (n) {
          let leafNodes = Array.of(...n)
          // console.log(leafNodes)
          leafNodes.forEach(leafNode => {
            if (!leafNode.parentElement.classList.contains('is-leaf-parent')) {
              leafNode.parentElement.classList.add('is-leaf-parent')
            }
          })
        }
      }, 30)
    },
    handleNodeClick(...args) {
      // console.log(args);
      this.$emit('node-click', ...args)
    }
  }
}
</script>

<style scoped>

</style>
